<template>
  <div class="cylinderFlowControl-TabTrack">
    <el-table-form ref="form" :model="query">
      <el-form-item label="钢瓶编号" prop="xpbm">
        <el-input v-model="query.gpbm" placeholder="请输入钢瓶编号" />
      </el-form-item>
      <el-form-item label="芯片编号" prop="xpbm">
        <el-input v-model="query.xpbm" placeholder="请输入芯片编号" />
      </el-form-item>

      <template v-slot:btns>
        <el-button type="primary" icon="el-icon-search" @click="getData">查询</el-button>
      </template>
    </el-table-form>

    <div class="cylinderFlowControl-TabTrack-body">
      <baidu-map
        v-if="isMapShow"
        ref="map"
        :key="updateMap"
        :map-click="false"
        style="height: 580px;"
        :enable-drawing-tool="true"
        scroll-wheel-zoom
        class="order_map"
        :center="'武汉'"
        :zoom="10"
        @ready="handler"
      >
        <bm-info-window
          ref="infoWindowRef"
          :width="120"
          :offset="windowInfo.offset"
          :position="iconPosition"
          :show="windowInfo.show"
        >
          <div class="map-window" v-html="windowInfo.contents" />
        </bm-info-window>
        <bm-marker
          :position="iconPosition"
          :dragging="false"
          animation="BMAP_ANIMATION_BOUNCE"
          @click="bmMarkerClick"
        />
      </baidu-map>
      <div v-if="isShowInfo" class="body-info">
        <div class="head">钢瓶历史踪迹</div>
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in trackInfoData"
            :key="index"
            :timestamp="dateFormat(item.happendTime)"
            placement="top"
          >
            <div
              :class="{
                bodyInfo_card: true,
                first: index === 0,
              }"
            >
              <p class="card_title">{{ item.chipTraceTypeName }}</p>
              <template v-if="item.chipTraceType === 1 || item.chipTraceType === 9">
                <p><span>装车机构：</span>{{ item.orgName }}</p>
                <p><span>装车车辆：</span>{{ item.truckCode }}</p>
                <p><span>装车人：</span>{{ item.ownerName }}</p>
              </template>
              <template v-else-if="item.chipTraceType === 2 || item.chipTraceType === 10">
                <p><span>卸车机构：</span>{{ item.orgName }}</p>
                <p><span>卸车车辆：</span>{{ item.truckCode }}</p>
                <p><span>卸车人：</span>{{ item.ownerName }}</p>
              </template>

              <template v-else-if="item.chipTraceType === 3 || item.chipTraceType === 4">
                <p>
                  <span>{{ item.chipTraceType === 3 ? "领瓶机构" : "还瓶机构" }}：</span>{{ item.orgName }}
                </p>
                <p v-if="item.ownerName"><span>还瓶人：</span>{{ item.ownerName }}</p>
                <p v-if="item.truckCode"><span>配送车辆：</span>{{ item.truckCode }}</p>
              </template>
              <template v-else-if="item.chipTraceType === 11">
                <p><span>充装场站：</span>{{ item.orgName }}</p>
                <p><span>充装工位：</span>{{ item.ownerName }}</p>
              </template>
              <template v-else-if="item.chipTraceType === 22 || item.chipTraceType == 23">
                <p><span>充装场站：</span>{{ item.orgName }}</p>
                <p><span>检查人：</span>{{ item.ownerName }}</p>
              </template>
              <template v-else>
                <p>
                  <span>客户名称：</span>{{ item.csmName }}
                  <span v-if="item.csmPhone">({{ item.csmPhone }})</span>
                </p>
                <p><span>地址：</span>{{ item.csmAddress }}</p>
                <p>
                  <span>配送员：</span>{{ item.sender
                  }}<span v-if="item.orgName">({{ item.orgName }})</span>
                </p>
                <p v-if="item.sender && item.truckCode">
                  <span>配送车辆：</span>{{ item.truckCode }}
                </p>
              </template>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
  import { queryTrackData } from '@/api'
  import dayjs from 'dayjs'
  export default {
    name: 'TabTrack',
    data() {
      return {
        query: {
          gpbm: '007210385975',
          xpbm: ''
        },
        updateMap: 0,
        iconPosition: {},
        trackInfoData: [],
        isMapShow: true,
        windowInfo: {
          show: false,
          contents: ''
        }
      // redIcon = require('../../../assets/map_images/red_sprite.png')
      }
    },
    computed: {
      isShowInfo() {
        return this.trackInfoData.length > 0
      }
    },
    methods: {
      handler({ BMap, map }) {
      // let icon = new BMap.Icon(this.redIcon, new BMap.Size(19, 25))
      },
      dateFormat(val) {
        return val ? dayjs(val).format('YYYY-MM-DD HH-MM') : ''
      },
      getMapScript() {
        if (!window.BMap) {
          return new Promise((resolve, reject) => {
            const $script = document.createElement('script')
            global.document.body.appendChild($script)
            $script.src = `https://api.map.baidu.com/api?v=2.0&ak=${this.ak}&callback=_initBaiduMap`
            window._initBaiduMap = () => {
              resolve(window.BMap)
              global.document.body.removeChild($script)
            }
            $script.onerror = (e) => {
              reject()
              this.$message.error('百度地图控件加载失败，请检查网络并重试！')
            }
          })
        } else {
          return Promise.resolve(window.BMap)
        }
      },
      async getData() {
        const params = {
          ...this.query
        }
        const { status, data } = await queryTrackData(params)
        if (status === 200) {
          if (data.length) {
            this.trackInfoData = data
            const oneData = data[0]
            this.iconPosition.lat = oneData.lat
            this.iconPosition.lng = oneData.lng
            this.windowInfo.show = true
            this.windowInfo.contents = `<p style='line-height: 20px;'><span>联系人：</span>${oneData.csmName}</p><p style='line-height: 20px;'><span>电话：</span>${oneData.csmPhone}</p><p style='line-height: 20px;'><span>地址：</span>${oneData.csmAddress}</p><p style='line-height: 20px;'><span>时间：</span>${dayjs(oneData.happendTime).format('YYYY-MM-DD HH:MM')}</p><p style='line-height: 20px;'><span>配送员：</span>${oneData.sender} </p>`
            const BMap = await this.getMapScript()
            this.windowInfo.offset = new BMap.Size(0, -40)

            this.refreshMap()
          }
        }
      },
      refreshMap() {
        this.isMapShow = false
        this.$nextTick(() => {
          this.isMapShow = true
        })
      },

      bmMarkerClick() {
        this.windowInfo.show = true
        // this.infoWindowOpen()
        this.refreshMap()
      }
    }
  }
</script>

<style lang="scss" scoped>
.cylinderFlowControl-TabTrack {
  .cylinderFlowControl-TabTrack-body {
    display: flex;
    height: 580px;
    .order_map {
      flex: 1;
    }
    .body-info {
      width: 300px;
      height: 580px;
      margin-left: 5px;
      overflow-y: auto;
      border: 1px solid #ebeff6;
    }
    .head {
      padding: 5px;
      border-bottom: 1px solid #ebeff6;
    }
    /deep/.el-timeline {
      margin-top: 20px;
      margin-left: 20px;

      .bodyInfo_card {
        .card_title {
          font-size: 16px;
          font-weight: 700;
        }

        p {
          line-height: 20px;
        }
      }
      .first {
        color: crimson;
      }
    }
  }
}
</style>
